<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background: rgba(0, 0, 0, 0.9);
			}
			
			img {
				width: 350px;
				height: 300px;
				border: 10px solid #fff;
				transition: width 2s 1s,transform 1s;
			}
			
			#wall {
				width: 1000px;
				height: 1000px;
				/*border: 1px solid #fff;*/
				margin: 20px auto;
				position: relative;
			}
			#wall .item1:hover{
		       z-index:999999 !important;
		       			}
			#wall img:hover{
				width: 450px;
				height: 430px;
				transform: rotate(360deg);
			}
			
			#wall .item1 {
				position: absolute;
				left: 0;
				top: 0;
				transform: rotate(0deg);
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var item = document.getElementsByClassName('item1');

				function f() {
					for(var i = 0; i < item.length; i++) {
						var new_left = Math.random() * 800;
						var new_top = Math.random() * 600;
						var dushu = parseInt(Math.random() * 90);
						var z_index=parseInt(Math.random() * 20);
						item[i].style.left = new_left + 'px';
						item[i].style.top = new_top + 'px';
						item[i].style.transform = 'rotate(' + dushu + 'deg)';
						item[i].style.zIndex = z_index;
					}
				}
				f();
				setInterval(f,6000);
			}
		</script>
	</head>

	<body>
		<div id="wall">
			<div class="item1" id="pic">
				<img src="./img/1.jpg" />
			</div>
			<div class="item1">
				<img src="./img/2.jpg" />
			</div>
			<div class="item1">
				<img src="./img/3.jpg" />
			</div>
			<div class="item1">
				<img src="./img/4.jpg" />
			</div>
			<div class="item1">
				<img src="./img/5.jpg" />
			</div>
			<div class="item1">
				<img src="./img/6.jpg" />
			</div>
			<div class="item1">
				<img src="./img/7.jpg" />
			</div>
			<div class="item1">
				<img src="./img/8.jpg" />
			</div>
			<div class="item1">
				<img src="./img/9.jpg" />
			</div>
			<div class="item1">
				<img src="./img/10.jpg" />
			</div>
			<div class="item1">
				<img src="./img/11.jpg" />
			</div>
			<div class="item1">
				<img src="./img/12.jpg" />
			</div>
			<div class="item1">
				<img src="./img/13.jpg" />
			</div>
			<div class="item1">
				<img src="./img/14.jpg" />
			</div>
			<div class="item1">
				<img src="./img/15.jpg" />
			</div>

		</div>
	</body>

</html>